<template>
  <div class="home">
    <div class="sider">
      <z-Sider @handleMenuName="handleMenuName" :project="item"/>

    </div>
  <div class="body">
    <div class="top">
      <div class="item-title">{{menuName}}</div>

      <div class="setting"></div>
    </div>
    <div class="container">
      <router-view></router-view>

    </div>
  </div>
  </div>
</template>

<script>
import Sider from '../components/Sider'

export default {
  name: 'home',
  components: {
    'z-Sider': Sider
  },
  data () {
    return {
      menuName: '尚未点击菜单',
      api: {
        detail: this.$api.item.detail
      },
      item: null
    }
  },
  methods: {
    handleMenuName (name) {
      this.menuName = name
    },
    init () {
      if (!this.$route.query.code) {
        this.$error('请选择项目')
        this.$router.push('/item')
      }
      this.$httpf({ url: this.api.detail, paras: { code: this.$route.query.code } }, data => {
        this.item = data.data.data.detail
        window.sessionStorage.project = JSON.stringify(this.item)
      })
    }
  },
  created () {
    this.init()
  }
}
</script>
<style scoped lang="less">
  .home {
    height: 100%;
    .sider {
      width: 220px;
      float: left;
      height: 100%;
      box-shadow: 2px 0 5px rgba(0,0,0,.3);
      position: relative;
      z-index: 2;
    }

    .body {
      overflow: auto;
      background-color: rgb(187, 230, 214);
      height: 100%;
      .top {

        height: 64px;
        background-color: rgb(187, 230, 214);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 16px;
        position: relative;
        box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.2);
        .item-title {
          font: 28px/32px Roboto, Avenir, Helvetica, Arial, sans-serif;
          color: rgb(44, 62, 80);
        }

        .setting {
          width: 50px;
          background-color: red;
        }
      }
      .container {
        margin-top: -64px;
        padding-top: 64px;
        box-sizing: border-box;
        background-color: #c8ebdf;
        height: 100%;
      }
    }
  }
</style>
